<template>
  <div class="mulbox">
    <van-cell-group>
      <van-popup v-model="visible" position="bottom" :style="{ height: '50%' }" @click-overlay="cancel" :close-on-click-overlay="false">
        <div style="position: sticky; top: 0; background-color: #fff; width: 100%; z-index: 1">
          <div class="btn">
            <div @click="cancel" class="cancle">取消</div>
            <div @click="confirm" class="confirm">确定</div>
          </div>
        </div>
        <van-checkbox-group v-model="result">
          <van-cell-group>
            <van-cell v-for="(item, index) in dataList" clickable :key="index" :title="`${item.name}`" @click="toggle(index)">
              <template #right-icon>
                <van-checkbox :name="item" ref="checkboxes" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-checkbox-group>
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'MultipleSelect',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: null,
    },
    list: {
      type: Array,
      default: null,
    },
  },

  watch: {
    visible: {
      handler: function (val, oldVal) {
        if (val) {
          this.dataList = this.list
        }
      },
      deep: true,
      immediate: false,
    },
  },
  data() {
    return {
      dataList: this.list,
      list2: [],
      result: [],
      userNames: this.value,
    }
  },
  created() {
    this.list2 = this.dataList
    //模拟有默认选中
    this.result = this.$parent.relevanceList.filter((item) => {
      const userNames = this.userNames.split(',')
      return userNames.includes(item.taskName)
    })
  },

  methods: {
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    //取消按钮
    cancel() {
      this.$emit('close')
    },
    //确定按钮
    confirm() {
      console.log(this.result)
      this.$emit('multipleSubmit', this.result)
      this.cancel()
    },
  },
}
</script>

<style lang="less" scoped>
.mulbox {
  background: #fff;
}
select-checkbox {
  position: absolute;
  right: 0;
}

.select-popup-footer {
  margin-top: 10px;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.btn {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding: 20px;
}

.cancle {
  font-size: 14px;
  color: #969799;
}

.confirm {
  font-size: 14px;
  color: #576b95;
}
/deep/.van-hairline--top-bottom::after {
  border: none;
}
/deep/ .van-cell__title,
.van-cell__value {
  font-size: 12px;
}
</style>
